import { Form, Modal, message, Row, Col, Space, Button } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { CheckCircleOutlined } from "@ant-design/icons";
import React, { useEffect, useState } from "react";
import { getGoodsSkuLogPage, getGoodsSpuLogPage } from "@/pages/GoodsModule/shopGoods/service";
import ViewLogButton from "@/views/components/ViewLogButton";
import useLogColumns from "@/pages/GoodsModule/shopGoods/components/Actions/logColumns";
/**
 *
 * @param {*} param0 options [{value,label}]
 * @returns
 */
export default ({
	visible,
	title = "更新结果",
	width,
	onCancel,
	isSkuType,
	actionType,
	result = { total: "-", success: "-", failed: "-" },
	buttonRender,
	resultRender
}) => {
	const { total, success, failed, successCount, failCount, totalCount } = result;

	const { columns } = useLogColumns({ actionType });
	useEffect(() => {}, [result]);

	const handleLog = () => {
		// message.info("TODO: 查看日志列表弹窗  +  日志查看详情弹窗");
	};

	const ResultCom = resultRender ? (
		resultRender()
	) : result ? (
		<>
			<Typography>总数：{totalCount || total || "-"}款</Typography>
			<Typography>
				成功：<span className="green">{successCount || success || 0}</span>款
			</Typography>
			<Typography>
				失败：<span className="red">{failCount || failed || 0}</span>款
			</Typography>
		</>
	) : (
		<></>
	);
	const FooterButton = buttonRender ? (
		buttonRender()
	) : actionType ? (
		<ViewLogButton
			tableKey={isSkuType ? "SKULogTable" : "SPULogTable"}
			columns={columns}
			SearchType={actionType}
			width="1154px"
			height="544px"
			tableHeight={460}
			tableRequest={isSkuType ? getGoodsSkuLogPage : getGoodsSpuLogPage}
			searchSpan={6}
		>
			<Button className="height24" size="middle" type="primary" onClick={handleLog}>
				查看日志
			</Button>
		</ViewLogButton>
	) : (
		<></>
	);
	return (
		<CommonModal title={{ title }} open={visible} width="528px" height="240px" footer={false} onCancel={onCancel}>
			<div className="flex-column flx-justify-between">
				<CheckCircleOutlined style={{ fontSize: "60px", color: "#52c41a" }} />
				<div className="flx-center justify-between mt36" style={{ width: "80%" }}>
					{ResultCom}
				</div>

				<Row justify="space-between" className="mt36 width-full">
					<Col></Col>
					<Col style={{ marginBottom: "0px" }}>
						<Space>{FooterButton}</Space>
					</Col>
				</Row>
			</div>
		</CommonModal>
	);
};
